<!--
  Generated template for the ListvidoPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->


<ion-content overflow-scroll="false">


    <h6 style="margin-left:1.45rem; ">{{video.name}}</h6>
    <!--<div class="videogular-container" style="width:100%;height:15.8rem;" (click)="applePlay()">-->

     <div [ngSwitch]="this.video.access_flag">
    <div *ngSwitchCase="1" style="width:100%;height:15.8rem;visibility:visible" >
      <!--<div>-->
      <!--<vg-player>-->
      <!--<video [vgMedia]="media" #media id="listvido" preload="auto" controls>-->

      <!--<source src="{{video.url}}" type="video/mp4">-->
      <!--</video>-->
      <!--</vg-player>-->

      <!--webkit-playsinline="true"-->
      <!--playsinline="true"-->
      <video  id="listvido"
             poster="./assets/imgs/video.jpg"
             antoplay="true"
             preload="auto"
             x-webkit-airplay="allow"
             x5-video-player-type="h5"
             webkit-playsinline="true"
             playsinline="true"
             style="object-fit:fill;padding: 0rem 0rem 0rem 0rem;"
             controls (click)="applePlay()">

        <!--<source src="http://pic.ibaotu.com/00/39/94/827888piC8RF.mp4" type="video/mp4">-->
        <source src="{{video.url}}" type="video/mp4">
        <!--<source src="{{this.videoUrl}}" type="video/mp4">-->

      </video>

      <!--<vg-player>-->
        <!--<vg-overlay-play></vg-overlay-play>-->
        <!--<vg-buffering></vg-buffering>-->
        <!--<vg-scrub-bar>-->
          <!--<vg-scrub-bar-current-time></vg-scrub-bar-current-time>-->
          <!--<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>-->
        <!--</vg-scrub-bar>-->
        <!--<vg-controls>-->
          <!--<vg-play-pause></vg-play-pause>-->
          <!--<vg-playback-button></vg-playback-button>-->

          <!--&lt;!&ndash;&lt;!&ndash;<vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>&ndash;&gt;&ndash;&gt;-->
          <!--&lt;!&ndash;&lt;!&ndash;<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>&ndash;&gt;&ndash;&gt;-->
          <!--&lt;!&ndash;&lt;!&ndash;<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>&ndash;&gt;&ndash;&gt;-->
          <!--&lt;!&ndash;<vg-mute></vg-mute>&ndash;&gt;-->

          <!--<vg-volume></vg-volume>-->
          <!--<vg-fullscreen></vg-fullscreen>-->
        <!--</vg-controls>-->
        <!--<video #myMedia [vgMedia]="myMedia"-->
               <!--height="210" preload="auto"-->
               <!--poster="{{video.img}}"-->
               <!--crossorigin-->
               <!--playsinline-->
               <!--webkit-playsinline-->
               <!--style="object-fit:fill;padding: 0rem 0rem 0rem 0rem;margin:0rem 0rem 0rem 0rem;overflow: visible;" controls>-->
          <!--<source src="{{video.url}}" type="video/mp4">-->
        <!--</video>-->
      <!--</vg-player>-->


      <!--<video id="videoID" src="{{video.url}}" poster="loadbg.jpg" preload="auto" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="true" playsinline="true"></video>-->



    </div>



       <div *ngSwitchCase="2" style="width:100%;height:13rem;background: rgba(135,194,255,0.1);visibility:visible">
         <!--<img  src="" style="width:100%;height:15.8rem;border-radius:0.5rem;box-shadow: 1px 2px 2px 1px #dfdfdf">-->
         <p style="text-align: center;margin: 0;font-size: 1.3rem;padding-top: 3.5rem;">小课堂付费视频，观看完整版请购买</p>
         <p style="text-align: center;margin: 0;font-size: 1.3rem;">观看更多视频，请加入vip</p>
         <div style="text-align: center;margin-top: 1rem;">
           <button class="button button-small button-balanced" style="width: 5rem;height: 1.5rem;background-color: #fff;margin-right: 1rem;border-radius: 1rem;" (click)="buySingle()">购买单集</button>
           <button class="button button-small button-balanced" style="width: 5rem;height: 1.5rem;background-color: #fff;border-radius: 1rem;" (click)="buyVip()">购买VIP</button>
         </div>

       </div>
        </div>



  <div>

  <ion-card style="border-radius:0.5rem">
    <div style="height:2rem;padding: 0 1rem;">
      <span></span>
      <span style="font-size: 0.8rem; margin-left: 0.2rem">已有{{this.video.watch_number}}人观看</span>
      <div style="float: right;font-size: 1rem;background: rgba(0,0,0, 0.3);border-radius: 0.5rem;height: 1.3rem;width: 3rem;margin: 0 auto; margin-top: 0.46rem;text-align: center;" (click)="ifComment()">
        评价
      </div>
    </div>
  </ion-card>

  <ion-card style="border-radius:0.5rem">
    <ion-card-header style="font-size:1.5rem;">
      {{video.name}}
      <div>
        <p></p>
      </div>
    </ion-card-header>

    <div class="intro"  id="dic_c" (click)="open_intro()">
      {{video.depict}}
    </div>
  </ion-card>

    <!--<div class="intro"   (click)="wxPayment()">微信支付测试</div>-->
    <!--<div class="intro"   (click)="getPaydata()">测试</div>-->
    <!--<div class="intro"   (click)="getWxconfigData()">测试</div>-->
    <!--<div class="intro"   (click)="buyMovie()">buyMovie</div>-->
    <!--<div class="intro"   (click)="getData()">getData</div>-->

  <ion-card style="border-radius:0.5rem">
    <ion-card-header style="font-size:1.2rem;padding: 1rem 1rem 0 1rem;">
      用户评价（<span>{{this.video.comments_number}}</span>）


      <div style="float: right;width: 13rem;padding-right: 1rem">

        <div style="float: right;width: 4rem;padding-left: 1rem;">
          <p style=";font-size: 1.2rem;text-align:center;color:#ffc628">{{this.average_score}}</p>
          <p style="font-size: 0.8rem;">
            视频评分
          </p>
        </div>

          <!--<div style=" width: 100px;height:20px;background: url('../../assets/imgs/hui-wjx.png'); background-size:100%; overflow: hidden;float:right;margin-top: 0.5rem;">-->
            <!--<div style="width: 20px;height:20px;background: url('../../assets/imgs/huang-wjx.png');display: inline-block;  background-size:cover;">-->
            <!--</div>-->
          <!--</div>-->




      </div>


    </ion-card-header>
    <li class="item-thumbnail-left" *ngFor="let item of comment_list " style="list-style-type:none; padding-left: -1.5rem; width: 100%;height: 6rem;">
      <ion-card-content >
        <div style="width:20%; float:left;">
          <img src="{{item.user.header_img}}" style="border-radius: 0.3rem">
        </div>
        <div style="width:80%; float:left; padding-bottom:1rem;padding-left:1rem ; margin-top: 0.5rem">
          <div style="overflow:hidden;font-size:1rem;">
            <div style="float:left;">
              <span>{{item.username}}</span><br/>
              <div style="font-size: 0.8rem" id="gmtCreate">{{this.date1(item.gmtCreate ) }}</div>
            </div>
            <!--<div style="float:right;" id="myDiv">-->
              <!--<span style="float:right"  id="thumb_num">{{item.thumbs_up}}</span>-->
              <!--&lt;!&ndash;<button  style="width:2.5rem;height:2.5rem;" src="../../assets/imgs/10101.jpg" (click)="goThumb(item.commidityId)">&ndash;&gt;-->
              <!--&lt;!&ndash;<div  style="width:2.5rem;height:2.5rem; color:#ccc; cursor:pointer;"  (click)="goThumb(item.id ,item.ifThumbsUp)">点赞</div>&ndash;&gt;-->
            <!--</div>-->

          </div>
          <p style="font-size:0.8rem;  overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;"  >{{item.comment}}</p>
          <div style="width: 100%;height: 1px;background-color: #cccccc;margin-top: 1.5rem;margin-left: -15%;">

          </div>
        </div>
      </ion-card-content>
    </li>

  </ion-card>

  </div>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" immediate-check="false">
    <ion-infinite-scroll-content class="ion-infinite-scroll-content"

      loadingSpinner="bubbles"
      distance="1%"
      loadingText="更多评论加载中...">

    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>
